<template>
  <a-config-provider :locale="locale">
    <div id="app">
      <a-layout style="min-height: 100vh">
        <!-- 头部 -->
        <a-layout-header class="header">
          <div class="header-left">
            <a-button
              type="text"
              @click="appStore.toggleCollapsed()"
              class="collapse-btn"
            >
              <template #icon>
                <MenuUnfoldOutlined v-if="collapsed" />
                <MenuFoldOutlined v-else />
              </template>
            </a-button>
            <div class="logo">账户系统</div>
          </div>
          <div class="header-right">
            <a-space>
              <a-avatar style="background-color: #1890ff">
                <template #icon>
                  <UserOutlined />
                </template>
              </a-avatar>
              <span>管理员</span>
            </a-space>
          </div>
        </a-layout-header>

        <a-layout>
          <!-- 左侧菜单 -->
          <a-layout-sider
            v-model:collapsed="collapsed"
            :trigger="null"
            collapsible
            theme="light"
            width="200"
          >
            <a-menu
              v-model:selectedKeys="selectedKeys"
              mode="inline"
              :style="{ height: '100%', borderRight: 0 }"
              @click="handleMenuClick"
            >
              <a-menu-item key="home">
                <template #icon>
                  <HomeOutlined />
                </template>
                首页
              </a-menu-item>
              <a-menu-item key="account">
                <template #icon>
                  <UserOutlined />
                </template>
                账户管理
              </a-menu-item>
              <a-menu-item key="certificate">
                <template #icon>
                  <FileTextOutlined />
                </template>
                证书管理
              </a-menu-item>
              <a-menu-item key="settings">
                <template #icon>
                  <SettingOutlined />
                </template>
                系统设置
              </a-menu-item>
            </a-menu>
          </a-layout-sider>

          <!-- 右侧内容区 -->
          <a-layout style="padding: 0 24px 24px">
            <a-breadcrumb style="margin: 16px 0">
              <a-breadcrumb-item>{{ currentPageTitle }}</a-breadcrumb-item>
            </a-breadcrumb>

            <a-layout-content
              :style="{
                background: '#fff',
                padding: '24px',
                margin: 0,
                minHeight: '280px',
              }"
            >
              <router-view />
            </a-layout-content>
          </a-layout>
        </a-layout>
      </a-layout>
    </div>
  </a-config-provider>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAppStore } from './stores/app'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import {
  HomeOutlined,
  UserOutlined,
  SettingOutlined,
  FileTextOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined
} from '@ant-design/icons-vue'

const router = useRouter()
const route = useRoute()
const appStore = useAppStore()

const locale = zhCN
const collapsed = computed({
  get: () => appStore.collapsed,
  set: (val) => appStore.setCollapsed(val)
})

const selectedKeys = ref(['home'])

// 菜单标题映射
const menuTitleMap = {
  home: '首页',
  account: '账户管理',
  certificate: '证书管理',
  settings: '系统设置'
}

const currentPageTitle = computed(() => {
  return menuTitleMap[selectedKeys.value[0]] || '首页'
})

// 监听路由变化
watch(
  () => route.path,
  (path) => {
    const key = path.substring(1) || 'home'
    selectedKeys.value = [key]
  },
  { immediate: true }
)

// 菜单点击事件
const handleMenuClick = ({ key }) => {
  router.push(`/${key}`)
}
</script>

<style scoped>
#app {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #001529;
  padding: 0 24px;
  height: 64px;
  line-height: 64px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
}

.collapse-btn {
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
}

.collapse-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.logo {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

.header-right {
  color: #fff;
  display: flex;
  align-items: center;
  height: 100%;
}
</style>